<template>
  <div class="examinationWrap">
    <div class="pageTableInner">
      <div class="infoSearchWrap" >
        <el-row>
          <el-col :span="6"><span>指标项：</span><span>
            <el-input  style="width: 200px;" clearable size="mini" @change="getExamineInfo" :maxlength="20" v-model="searchInfo.itemsName" auto-complete="off" placeholder="指标项"></el-input></span></el-col>
          <div style="float: right;margin-bottom: 15px;">
            <el-button type="primary" size="mini" @click="getExamineInfo()">查询</el-button>
            <span>
              <el-button v-if="$store.state.btnMenuIds.indexOf(67)>-1" style="margin-left: 10px;" type="primary" size="mini" @click="$refs.addBtn.dialogFormVisibleAdd=true">新增指标类别 </el-button>
               <el-button v-if="$store.state.btnMenuIds.indexOf(68)>-1" type="primary" size="mini" @click="$refs.addTargetBtn.dialogFormVisibleAdd = true">新增指标项</el-button>
               </span>
          </div>
        </el-row>
      </div>
      <div class="tableContainer">
        <div class="tableInner" ref="tableInner">
          <el-table
            ref="multipleTable"
            :data="rows"
            stripe
            :height="tableHeight"
            :span-method="objectSpanMethod"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column
              label="指标类别"
              prop="classifyName"
              show-overflow-tooltip
            >
            </el-table-column>

            <el-table-column
              prop="itemsName"
              label="指标项"
              show-overflow-tooltip
            >
            </el-table-column>

            <el-table-column
              label="指标描述"
              prop="itemsDesc"
              show-overflow-tooltip>

            </el-table-column>
            <el-table-column
              label="评分标准"
              prop="scoreRule"
              show-overflow-tooltip
              >
              <template slot-scope="scope">
                <div style="float: left;">
                  {{scope.row.scoreRule}}
              </div>

              </template>
            </el-table-column>
            <el-table-column
              label="责任部门"
              prop="g"
              >
              <template slot-scope="scope">
                <el-row>
                  <el-col v-show="scope.row.hasRoadTransport"  :span="12">
                    <span >市交通局</span>
                  </el-col>
                  <el-col v-show="scope.row.hasCityManage"  :span="12">
                    <span >市城管局</span>
                  </el-col>
                  <el-col v-show="scope.row.hasTraffic" :span="12">
                    <span  >市交警局</span>
                  </el-col>
                  <el-col v-show="scope.row.hasAreaGov" :span="12">
                    <span >各区政府</span>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
            <el-table-column
              label="上传附件"
              prop="hasAttachment"
              width="80"
              >
              <template slot-scope="scope">
                {{scope.row.hasAttachment?"是":"否"}}
              </template>
            </el-table-column>
            <el-table-column
              v-if="$store.state.btnMenuIds.indexOf(74)>-1||$store.state.btnMenuIds.indexOf(75)>-1"
              label="操作"
            >
              <template slot-scope="scope">
                <setTargetBtn v-if="$store.state.btnMenuIds.indexOf(74)>-1" @getExamineInfo="getExamineInfo" :classifyList="classifyList" :editData="scope.row"></setTargetBtn>
                <i v-if="$store.state.btnMenuIds.indexOf(75)>-1" @click='handleDelete(scope.row)' class="iconfont icon-shanchu" style="margin-left: 10px;"></i>
                <!--<el-button size="mini" type="text" class="dangerBtn" @click="handleDelete(scope.row)">删除</el-button>-->
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <addBtn ref="addBtn" @getExamineInfo="getExamineInfo"></addBtn>
    <addTargetBtn ref="addTargetBtn" @getExamineInfo="getExamineInfo" :classifyList="classifyList"></addTargetBtn>
  </div>
</template>
<script>
  import addBtn from './addBtn.vue';
  import addTargetBtn from './addTargetBtn.vue';
  import setTargetBtn from './setTargetBtn.vue';
  export default {
    props: [],
    data(){
      return {
        rows: [],
        spanArr: [],
        classifyList: [],
        pageSize: 10,
        count: 1468,
        currentPage: 1,
        tableHeight:400,
        searchInfo: {
          itemsName: "",
        },
      }
    },
    components: { addBtn,addTargetBtn,setTargetBtn},
    created(){
      this.getExamineInfo()

    },
    mounted(){

      this.$nextTick(() => {
        //表格滚动
        this.tableHeight = document.querySelector(".examinationWrap").clientHeight - 120
      })
    },

    methods: {
      //获取所有信息
      getExamineInfo(){
         let url = process.env.API_HOST + `/examine/selectItemsData`
         this.axios.post(url, {itemsName:this.searchInfo.itemsName, })
         .then(response => {
           let result = response.data
           if(result.code==200){
             this.rows=[]
             if(!this.searchInfo.itemsName) {
               this.classifyList = []
             }
               result.result.forEach(item=>{
                 item.itemList.forEach(item1=>{
                   this.rows.push({...item1,classifyName:item.classifyName})
                 })
                 if(!this.searchInfo.itemsName){
                    this.classifyList.push({
                      classifyName:item.classifyName,
                      classifyId:item.classifyId,
                    })
                 }
             })
             this.spanArr=this.getSpanArr(this.rows,"classifyName")
           }
         })

      },

      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          const _row = this.spanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
      },
      handleDelete(row){
        this.$confirm('确认删除指标项 “' + row.itemsName + '” , 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.post(process.env.API_HOST + `/examine/deleteItems?`,{itemsId:row.itemsId})
            .then(response => {
              const result = response.data
              if (result.code === 200) {

                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.getExamineInfo()
              }
            })
        }).catch(() => {

        });
      },
    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .examinationWrap
    page()



</style>
